<template>
	<view>
		<!-- 订单状态顶部展示 S -->
		<view class="detail-top level_align ">
			<view v-if="orderStatus == 0" class="level_align tp-ptb0lr30 tp-fc333" style="margin: 0 auto;">
				<image class="typeimg tp-mr30" src="../static/ddnotpay.png" mode=""></image>
				<view class="level_align tp-fcF" style="font-size: 40rpx;font-weight: bold;">
					待付款(需支付￥{{info.totalRealAmount}})
				</view>
			</view>
			<view v-else class="level_align tp-ptb0lr30 tp-fc333" style="margin: 0 auto;">
				<image v-if="[-1,1].includes(orderStatus - 0)" class="typeimg tp-mr30" src="../static/ddnotuse.png" mode=""></image>
				<image v-if="orderStatus == 2" class="typeimg tp-mr30" src="../static/ddpj.png" mode=""></image>
				<image v-if="[4,5].includes(orderStatus - 0)" class="typeimg tp-mr30" src="../static/ddtk.png" mode=""></image>
				<image v-if="[3,6].includes(orderStatus - 0)" class="typeimg tp-mr30" src="../static/ddok.png" mode=""></image>
				<view class="level_align tp-fcF" style="font-size: 40rpx;font-weight: bold;">
					{{info.statusDesc || ''}}
				</view>
			</view>
		</view>
		<!-- 订单状态顶部展示 E -->

		<!-- 酒店合计 S -->
		<view class="tp-bgf tp-pd30 level_align flex_between tp-mb2" @click="pageJumps('/pagesSecond/scenic/scenicDetail?id=' + info.jqId)">
			<view class="level_align flex-1 tp-mr30">
				<image class="goods-img tp-mr20 tp-br8" :src="wwwImgUrl + info.jqCover" mode="aspectFill"></image>
				<view class="flex flex-1 flex_column flex_between" style="height: 142rpx;">
					<view class="">
						<text class="ellispsis1 tp-fz28  tp-fc333" style="font-weight: bold;padding-bottom: 10rpx;">{{info.jqName}}</text>
						<view>
							<text class="level_align tp-fz24 tp-fc666 flex-1 tp-mr20">使用日期 : {{info.useTime}}</text>
						</view>
					</view>

					<view class="level_align tp-fz24 tp-fc666 flex-1 tp-mr20 ">
						<view class="ellispsis2">
							<text class="tp-mr10">{{ticketIntroVoList.length && ticketIntroVoList[0].ticketsName && ticketIntroVoList[0].ticketsName}} </text> <text class="" v-if="item.num != 0" v-for="(item,index) in ticketIntroVoList" :key='index'>{{item.skuName}}{{item.num}}张 {{(item.num != 0) ? '  ' : ''}}</text>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="tp-bgf tp-h88 level_align flex_between tp-ptb0lr30 tp-mb2" @click="goToHotelPriceDetail()">
			<text class="tp-fz30">合计</text>
			<view class="level_align tp-fz24 tp-red tp-fw600">
				<view class="flex align_baseline">
					￥<text class="tp-fz36 tp-mr20">{{info.totalRealAmount}}</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#999"></uni-icons>
			</view>
		</view>
		<!-- 二维码展示 S -->
		<view v-if="orderStatus != 0">
			<CommonCode :code="info.voucherCode" :used="[2,3].includes(orderStatus - 0)" :expired="[-1,4,6].includes(orderStatus - 0)"
			 :url="/^[http | https]/.test(info.qrCode) ? info.qrCode : (wwwImgUrl + info.qrCode) " :timeOut="true" :codeStatus="'凭证码'" :showUrl="false"></CommonCode>
		</view>
		<!-- 二维码展示 E -->
		<!-- 酒店合计 E -->

		<!-- 商品详情 S -->
		<view class="tp-bgf tp-ptb0lr30 tp-mt20 tp-pt20 tp-pb20">
			<view class="tp-bgf level_align flex_between tp-pr  tp-h64">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>游客信息</text>
				</view>
			</view>
			<view class=" tp-fc333 tp-lh64 ">
				<view class="level_align tp-fz28 tp-fc333 tp-lh64" v-for="(item,index) in orderMemberVos" :key="index">
					<text class=" tp-fz30 tp-fw600 ellispsis1 tp-mr20" style="max-width: 180rpx;">{{item.passengerName}}</text>
					<text class=" tp-mr20">{{item.phone}}</text>
					<text class="">{{item.star}}</text>
				</view>
			</view>
		</view>
		<!-- 商品详情 E -->

		<!-- 联系人信息 S -->
		<view class="tp-bgf tp-ptb0lr30 tp-pb20 tp-pt20 tp-mt20">
			<view class="tp-bgf level_align flex_between tp-pr  tp-h64">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>联系信息</text>
				</view>
			</view>
			<view class="level_align tp-fz28 tp-fc333 tp-lh64">
				<text class=" tp-fz30 tp-fw600 ellispsis1 tp-mr20" style="max-width: 180rpx;">{{info.name}}</text>
				<text class=" tp-mr20">{{info.phone}}</text>
			</view>
		</view>
		<!-- 联系人信息 E -->

		<!-- 订单信息 S -->
		<view class="tp-bgf tp-ptb0lr30 tp-pb20 tp-pt20 tp-mt20">
			<view class="tp-bgf level_align flex_between tp-pr  tp-h64">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>订单信息</text>
				</view>
			</view>
			<view class="flex flex_column tp-fz28 tp-fc333 tp-lh54 tp-mt15 tp-pb20">
				<view class="level_align">
					<text class="tp-fc666 tp-mr10">订单号：</text><text>{{info.orderNo}}</text>
				</view>
				<view class="level_align">
					<text class="tp-fc666 tp-mr10">下单时间：</text><text>{{info.createTime}}</text>
				</view>
				<view class="level_align" v-if="orderStatus > 0">
					<text class="tp-fc666 tp-mr10">支付时间：</text><text>{{info.payTime}}</text>
				</view>
				<view class="level_align" v-if="orderStatus > 0 &&　info.payTime">
					<text class="tp-fc666 tp-mr10">支付方式：</text><text>{{info.payType}}</text>
				</view>
				<view class="level_align" v-if="orderStatus > 3">
					<text class="tp-fc666 tp-mr10">申请时间：</text><text>{{info.cancelTime}}</text>
				</view>
				<view class="level_align" v-if="orderStatus > 1 && orderStatus < 4">
					<text class="tp-fc666 tp-mr10">使用时间：</text><text>{{info.useTime}}</text>
				</view>
				<view class="level_align" v-if="orderStatus == 6">
					<text class="tp-fc666 tp-mr10">退款时间：</text><text>{{info.refundTime || ''}}</text>
				</view>
			</view>
		</view>
		<!-- 订单信息 E -->
		<!-- 客服 S -->
		<view class="kefu-fixed" @click="handleKeFu">
			<image src="../static/kefu2.png" mode=""></image>
		</view>
		<!-- 客服 E -->

<!-- 		<view class="tp-ptb0lr30 tp-mt20">
			<view class="tp-pd30 tp-bgf tp-bbox level_align flex_between tp-br12">
				<view class="level_align">
					<image class="tp-img44 tp-mr15" src="../static/xing0.png" mode=""></image>
					<image v-if="false" class="tp-img44 tp-mr15" src="../static/xing1.png" mode=""></image><text>收藏</text>
				</view>
				<view class="order-line"></view>
				<view class="level_align">
					<image class="tp-img44 tp-mr15" src="../static/fenxiagn.png" mode=""></image><text>分享</text>
				</view>
				<view class="order-line"></view>
				<view class="level_align">
					<image class="tp-img44 tp-mr15" src="../static/kefu.png" mode=""></image><text>客服</text>
				</view>
			</view>
		</view> -->

		<!-- 底部按钮栏 S -->
		<view class="tp-h98 tp-btn-h100 flex_end level_align tp-bgf tp-fz30" style="z-index: 20;" v-if="orderStatus != 5">
			<view v-if="[-1,3,6].includes(orderStatus - 0)" @click="removeOrder" class=" tp-ptb0lr30 tp-h72 center_combo tp-bgf tp-border1 tp-br12 tp-fc666 tp-mr30">
				删除订单
			</view>
			<view v-if="[0].includes(orderStatus - 0)" @click="NoPayCancel" class=" tp-ptb0lr30 tp-h72 center_combo tp-bgf tp-border1 tp-br12 tp-fc666 tp-mr30">
				取消订单
			</view>
			<view v-if="[0].includes(orderStatus - 0)" @click="handePay" class=" tp-ptb0lr30 tp-h72 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				立即支付
			</view>
			<view v-if="[1].includes(orderStatus - 0)" @click="handeRefundDect" class=" tp-ptb0lr30 tp-h72 center_combo tp-bgf tp-border1 tp-br12 tp-fc666 tp-mr30">
				申请退款
			</view>
			<view v-if="[2].includes(orderStatus - 0)" @click="pageJumps('../hotelEvaluate?pageName=scenic&id='+ orderId + '&orderNo=' + info.orderNo + '&shopName='+ info.jqName + '&shopCover=' + info.jqCover)"
			 class=" tp-ptb0lr30 tp-h72 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				立即评价
			</view>
			<view v-if="[3].includes(orderStatus - 0)" @click="pageJumps('../hotelEvaluate?pageType=1&pageName=scenic&id='+ orderId)"
			 class=" tp-ptb0lr30 tp-h72 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				查看评价
			</view>
			<view v-if="[4].includes(orderStatus - 0)" @click="pageJumps('../refundSchedule?pageName=scenic&orderId=' + orderId)"
			 class=" tp-ptb0lr30 tp-h72 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
				退款进度
			</view>
		</view>
		<!-- 底部按钮栏 E -->

		<view class="tp-h98 tp-mt20"></view>
		<!-- 支付 -->
		<CommonPaySecond ref="commonPay" :price="info.totalRealAmount" :orderInfo="orderInfo" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
		 
		 <!-- 客服服务电话弹框 S-->
		 <CommonServicePhone ref="takePhone" type="8"></CommonServicePhone>
		 <!-- 客服服务电话痰喘 E-->
	</view>
</template>

<script>
	import utils from "../../utils/utils.js"
	import CommonCode from '@/components/common/common-code.vue'
	import CommonPaySecond from '../common/common-pay-second.vue'
	import CommonServicePhone from '@/components/common/common-servicePhone.vue'
	export default {
		components: {
			CommonCode,
			CommonPaySecond,
			CommonServicePhone
		},
		data() {
			return {
				orderStatus: null, // 订单状态
				orderId: '', //订单id
				info: {}, // 页面数据
				ticketIntroVoList: {}, // 	订单的门票信息
				orderMemberVos: [], //  	游客信息列表
			};
		},
		onLoad(opt) {
			this.orderId = opt.id
		},
		onShow() {
			this.getPageInfo();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPageInfo();
		},
		computed:{
			orderInfo() {
				let o = {
					orderId: this.orderId,
					type: 1,
					orderType: 2
				}
				return o
			},
		},
		methods: {
			// 申请退款 
			handeRefundDect(){
				let data = {
					orderId: this.orderId,
					orderNo: this.info.orderNo,
					applyForMoney: this.info.totalRealAmount,
					refundPhone: this.info.phone,
					name: this.info.jqName,
					imgSrc: this.info.jqCover,
					useTime: this.info.useTime,
					ticketIntroVoList: this.ticketIntroVoList,
				}
				uni.navigateTo({
					url: '../hotelApplyForMoney?pageName=scenic&info=' + JSON.stringify(data)
				})
			},
			// 立即支付
			handePay(){
				this.$refs.commonPay.show()
			},
			// 积分支付成功
			payMoney(pwd) {
				this.$http.post(this.$api.scenicOrderByYue, {
					orderId: this.orderId,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						this.getPageInfo()
						uni.showToast({
							title: '支付成功'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				
			},
			// 未支付取消订单
			NoPayCancel(id) {
				this.$http.get(this.$api.scenicnoPayCancel + '?orderId=' + this.orderId).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},600)
					}
				})
			},
			// 删除订单
			removeOrder(id) {
				this.$http.get(this.$api.scenicremoveOrder + '?orderId=' + this.orderId).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '删除订单',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						},600)
					}
				})
			},
			// 获取页面数据
			getPageInfo() {
				this.$http.get(this.$api.scenicOrderDetail + '?orderId=' + this.orderId).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.info = res.data
						this.orderStatus = res.data.status
						this.orderMemberVos = res.data.orderMemberVos
						this.ticketIntroVoList = res.data.ticketIntroVoList
						this.orderMemberVos = res.data.orderMemberVos
						this.orderMemberVos.map(item => {
							item.star = utils.employStarHidden(item.certificateNumber, 4, 4)
						})
					}
				})
			},
			// 去价格详情
			goToHotelPriceDetail() {
				let {
					customerCouponPrice,
					integralPrice,
					totalRealAmount
				} = this.info
				let list = this.info.ticketIntroVoList
				let data = {
					customerCouponPrice,
					integralPrice,
					totalRealAmount,
					list
				}
				uni.navigateTo({
					url: '/pagesUser/hotelPriceDetail?pageName=scenic&info=' + JSON.stringify(data)
				})
			},
			// 点击客服
			handleKeFu() {
				this.$refs.takePhone.show()
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .code-wrap {
		margin: 0 !important;
		width: 100%;
	}

	.typeimg {
		width: 100rpx;
		height: 100rpx;
	}

	.detail-top {
		height: 160rpx;
		background: url(../static/hotel-orderdetail-bg.png) no-repeat;
		background-size: 100%;
		background-position: center;
	}

	.goods-img {
		width: 190rpx;
		height: 142rpx;
	}

	.order-line {
		width: 2rpx;
		height: 44rpx;
		background: #EBEBEB;
	}
	.kefu-fixed {
		position: fixed;
		right: 60rpx;
		bottom: 200rpx;
		width: 100rpx;
		height: 100rpx;
	}
</style>
